<template>
  <div class="easy-container flex">
    <div class="cell">
      <router-link :to="`/spaces/${space.id}`" class="flex">
        <space-avatar :space="space" :size="55" />
      </router-link>
    </div>
    <div class="flex-1 flex align-items-center min-w-0">
      <div class="cell min-w-0" style="flex: 1 1 100%;">
        <div>
          <router-link :to="`/spaces/${space.id}`" class="title link f-normal hover-underline">
            {{ space.title }}
          </router-link>
          -
          <router-link :to="`/users/${space.owner.id}`" class="info-deep link">
            {{ space.owner.nickname }}
          </router-link>
        </div>
        <div class="line1">{{ space.desc }}</div>
      </div>
      <div class="cell shrink-0 text-right">
        <space-icons :space="space" />
        <timeago2 :date-time="space.updated_at" pre-text="更新于" />
      </div>
    </div>
  </div>
</template>

<script>
import SpaceAvatar from '@/components/space-avatar';
import SpaceIcons from '@/components/spaces/SpacesListIcons';

export default {
  name: 'component-spaces-list-item',
  components: { SpaceAvatar, SpaceIcons },
  props: {
    space: Object,
  },
};
</script>

<style></style>
